<!--
* @author wn
* @date 2023/12/12 11:08:28
* @description: 确认订单页面
!-->
<template>
	<scroll-view scroll-y class="viewport">
		<!-- 收货地址 -->
		<navigator
			v-if="selectedAddress"
			class="shipment"
			hover-class="none"
			url="/pagesMember/address/address?from=order"
		>
			<view class="user">
				{{ selectedAddress.receiver }} {{ selectedAddress.contact }}
			</view>
			<view class="address">
				{{ selectedAddress.fullLocation }} {{ selectedAddress.address }}
			</view>
			<text class="icon-right"></text>
		</navigator>
		<navigator
			v-else
			class="shipment"
			hover-class="none"
			url="/pagesMember/address/address?from=order"
		>
			<view class="address"> 请选择收货地址 </view>
			<text class="icon-right"></text>
		</navigator>
		<!-- 商品信息 -->
		<view class="goods">
			<navigator
				v-for="good in orderData?.goods"
				:key="good.skuId"
				:url="`/pages/goods/goods?id=${good.id}`"
				class="item"
				hover-class="none"
			>
				<image class="picture" :src="good.picture" />
				<view class="meta">
					<view class="name ellipsis"> {{ good.name }} </view>
					<text class="attrs">{{ good.attrsText }}</text>
					<view class="prices">
						<view class="pay-price symbol">{{ good.payPrice }}</view>
						<view class="price symbol">{{ good.price }}</view>
						<view class="count">{{ good.count }}</view>
					</view>
				</view>
			</navigator>
		</view>
		<!-- 配送及支付方式 -->
		<view class="related common-box">
			<view class="item common-item">
				<text class="text">配送时间</text>
				<picker
					:range="deliveryList"
					range-key="text"
					@change="onChangeDelivery"
				>
					<view class="icon-fonts picker icon-right-after">
						{{ activeDelivery.text }}
					</view>
				</picker>
			</view>
			<view class="item common-item">
				<text class="text">订单备注</text>
				<input
					class="input"
					:cursor-spacing="30"
					placeholder="选题，建议留言前先与商家沟通确认"
					v-model="buyerMessage"
				/>
			</view>
		</view>
		<!-- 支付金额 -->
		<view class="settlement common-box">
			<view class="item common-item">
				<text class="text">商品总价: </text>
				<text class="number symbol">
					{{ orderData?.summary.totalPayPrice.toFixed(2) }}
				</text>
			</view>
			<view class="item common-item">
				<text class="text">运费: </text>
				<text class="number symbol">
					{{ orderData?.summary.postFee.toFixed(2) }}
				</text>
			</view>
		</view>
		<view :style="{ height: safeAreaInsets!.bottom + 50 + 'px' }"></view>
	</scroll-view>

	<!-- 吸底工具栏 -->
	<view
		class="toolbar"
		:style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
	>
		<text class="total-pay symbol">
			{{ orderData?.summary.totalPayPrice.toFixed(2) }}
		</text>
		<view
			class="button"
			:class="{ disabled: !selectedAddress }"
			@tap="onOrderSubmit"
		>
			提交订单
		</view>
	</view>
</template>
<script lang="ts" setup>
import {
	getCreateOrderDataAgainApi,
	getCreateOrderDataApi,
	getCreateOrderDataNowApi,
	postOrderApi,
} from '@/api/order'
import { useAddressStore } from '@/stores'
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 订单备注
const buyerMessage = ref('')

// 配送时间
const deliveryList = ref([
	{ type: 1, text: '时间不限 (周一至周日)' },
	{ type: 2, text: '工作日送 (周一至周五)' },
	{ type: 3, text: '周末配送 (周六至周日)' },
])

// 当前配送时间下标
const activeIndex = ref(0)

// 当前配送时间
const activeDelivery = computed(() => deliveryList.value[activeIndex.value])

// 修改配送时间
const onChangeDelivery: UniHelper.SelectorPickerOnChange = ev => {
	activeIndex.value = ev.detail.value
}

const { skuId, count, orderId } = defineProps<{
	skuId?: string
	count?: string
	orderId?: string
}>()
/**
 * 获取订单信息
 * 1 商品页直接购买 skuId + count
 * 2 再次购买 订单编号
 * 3 购物车进入 无需参数
 */
const orderData = ref<CreateOrderData>()
const getCreateOrderDataFn = async () => {
	if (skuId && count) {
		const data = await getCreateOrderDataNowApi({ skuId, count })
		orderData.value = data
	} else if (orderId) {
		const data = await getCreateOrderDataAgainApi(orderId)
		orderData.value = data
	} else {
		const data = await getCreateOrderDataApi()
		orderData.value = data
	}
}

onLoad(() => getCreateOrderDataFn())

/**
 * 获取收货地址 -- 创建独立 Store 维护 -- 修改地址页维护
 * 初始页没有选中 地址由 订单数据提供 -- 默认地址
 */
const store = useAddressStore()
const selectedAddress = computed(
	() =>
		store.selectedAddress ||
		orderData.value?.userAddresses.find(v => v.isDefault)
)

// 提交订单
const onOrderSubmit = async () => {
	// 没有地址 提醒
	if (!selectedAddress.value)
		return uni.showToast({ icon: 'none', title: '请选择收货地址' })
	// 发送请求
	const { id } = await postOrderApi({
		addressId: selectedAddress.value.id,
		deliveryTimeType: activeDelivery.value.type,
		buyerMessage: buyerMessage.value,
		goods: orderData.value!.goods.map(v => ({
			skuId: v.skuId,
			count: v.count,
		})),
		payChannel: 2,
		payType: 1,
	})
	// 关闭当前页面，跳转到订单详情，传递订单 id
	uni.redirectTo({ url: `/pagesOrder/detail/detail?id=${id}` })
}
</script>
<style lang="scss">
.symbol::before {
	content: '¥';
	font-size: 80%;
	margin-right: 5rpx;
}
// 颜色 url 重复  滚动 x轴 y轴 / 尺寸
.shipment {
	position: relative;
	margin: 20rpx;
	padding: 30rpx 30rpx 30rpx 84rpx;
	font-size: 26rpx;
	border-radius: 10rpx;
	background: #fff
		url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png)
		no-repeat scroll 20rpx center / 50rpx;
	.user {
		color: #333;
		margin-bottom: 6rpx;
	}
	.address {
		color: #666;
	}
	.icon-right {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 36rpx;
		color: #333;
	}
}

.goods {
	margin: 20rpx;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: #fff;

	.item {
		display: flex;
		padding: 30rpx 0;
		border-top: 1rpx solid #eee;

		&:first-child {
			border-top: none;
		}

		.picture {
			width: 170rpx;
			height: 170rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.meta {
			flex: 1;
		}

		.name {
			height: 80rpx;
			font-size: 26rpx;
			color: #444;
		}

		.attrs {
			padding: 8rpx 15rpx;
			margin-top: 6rpx;
			font-size: 24rpx;
			border-radius: 4rpx;
			color: #888;
			background-color: #f7f7f8;
		}

		.prices {
			display: flex;
			align-items: baseline;
			margin-top: 6rpx;
			font-size: 28rpx;
			.pay-price {
				margin-right: 10rpx;
				color: $primary-price;
			}

			.price {
				flex: 1;
				font-size: 24rpx;
				color: #999;
				text-decoration: line-through;
			}
			.count {
				font-size: 26rpx;
				color: #444;
			}
		}
	}
}
// 通用 css
.common-box {
	margin: 20rpx;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: #fff;
}
.common-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.related {
	.item {
		min-height: 80rpx;
		font-size: 26rpx;
		color: #333;
		.text {
			width: 125rpx;
		}
		.picker {
			color: #666;
		}
		.icon-right-after::after {
			margin-left: 6rpx;
		}
		.input {
			flex: 1;
			text-align: right;
			padding-right: 20rpx;
			font-size: 26rpx;
			color: #999;
		}
	}
}

/* 结算清单 */
.settlement {
	.item {
		height: 80rpx;
		font-size: 26rpx;
		color: #333;
	}

	.danger {
		color: #cf4444;
	}
}

/* 吸底工具栏 */
.toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: content-box;

	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--window-bottom));
	z-index: 1;

	background-color: #fff;
	height: 100rpx;
	padding: 0 20rpx;
	border-top: 1rpx solid #eaeaea;

	.total-pay {
		font-size: 40rpx;
		color: $primary-price;
		.decimal {
			font-size: 75%;
		}
	}

	.button {
		width: 220rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 26rpx;
		color: #fff;
		border-radius: 72rpx;
		background-color: $primary-color;
		&.disabled {
			opacity: 0.6;
		}
	}
}
</style>
